import router from '@/router'
import store from './store'
// 引入进度条
import NProgress from 'nprogress' //  引入一份进度条插件
import 'nprogress/nprogress.css' // 引入进度条样式
/**
 * 1. 引入Nprogress以及css
 * 2.   NProgress.start(); 进入页面前开启进度条
        NProgress.done(); 进入页面后进度条跑完
  注意：1、非直接放行（拦截到任意页面）时，不会触发后置守卫afterEach
        所以，直接拦截到某个页面时，我们要手动关闭进度条
        2、关闭进度条最后边的转圈圈

/
/**  前置守卫：进入页面之前
 *逻辑分析：
 1、如果有token（已登录）
        如果去登录页直接拦截到首页，否则全部放行
 2、没有token（未登录）
        如果去白名单直接放行，否则拦截到登录页
 */
const whiteList = ['/login', '/404']
router.beforeEach(async(to, form, next) => {
  // 加入进度条效果
  NProgress.start()

  const token = store.getters.token
  // console.log(token)
  if (token) {
    if (to.path === '/login') {
      next('/')
      // 直接拦截到某个页面时，我们要手动关闭进度条
      NProgress.done()
    } else {
      // 对于不同的用户角色, 将来需要有不同的菜单展示的`, **我们应该在一准备要进入到页面, 就获取用户信息**, 要等用户信息获取完了, 再让你完全进页面

      // 所以在前置守卫拿数据，异步的  // 这里是promise对象
      if (!store.state.user.userInfo.userId) {
        // 严谨判断：（避免每次点击进入新的页面都会发请求）
        // 如果当前vuex中已经有用户资料了, 就不需要再获取了 (没必要重复获取资料)
        const { roles: { menus }} = await store.dispatch('user/getUserInfo')
        console.log('vuex的actions中return的值', menus)

        // 注意： addRoutes - 添加路由规则们 参数是数组
        // 数组里每一个对象就是路由规则
        // 需求： 先不做过滤，把所有动态路由全部加进去
        // 固定语法: addRoutes + 回首掏
        // dynamically add accessible routes
        // 动态添加可以访问路由
        /**
         * 过滤逻辑
         * asyncRoutes - 所有动态路由 对象数组 对象-路由规则
         * menus - 该用户能看到的页面访问权
         */
        // 这里调用actions中的方法
        const otherRoutes = await store.dispatch('permission/filterRoutes', menus)
        console.log('接收actions中函数返回值', otherRoutes)
        // 将过滤好的数组加入,(让404页面放在最后面)
        router.addRoutes([...otherRoutes, { path: '*', redirect: '/404', hidden: true }])
        /**
         * 黑客方法 - 保证添加的路由规则是完整的 完成添加了
         * 设置 replace: true 所以这个导航不会留下历史记录
         */
        // console.log('to', to) //这是个对象
        // to是去哪里 next又去了to的地方 - 回首掏
        next({ ...to, replace: true })
      }
      next()
    }
  } else {
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
      // 直接拦截到某个页面时，我们要手动关闭进度条
      NProgress.done()
    }
  }
})

// 后置守卫：进入页面后 回调函数参数没有next 因为都进入页面了
router.afterEach(() => {
  // 关闭进度条
  NProgress.done()
})
